<script setup lang="ts">
import { useDark } from '@vueuse/core';

const props = defineProps<{
  active: boolean;
}>();

const dark = useDark();

</script>

<template>
  <svg t="1753360839340" class="icon w-[20px] h-[20px] mb-1" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="7744">
    <path
      d="M511.113985 1022.21103a511.097545 511.097545 0 1 1 511.096545-511.096545 511.097545 511.097545 0 0 1-511.096545 511.096545z m12.776788-753.867529a57.499049 57.499049 0 0 0-114.997097 0v287.619242a57.371051 57.371051 0 0 0 57.499049 57.499049H753.883969a57.499049 57.499049 0 0 0 0-114.998098H523.890773z"
      :fill="!props.active ? dark ? '#fff' : '#00000022' : '#1989fa'" p-id="7745"></path>
  </svg>
</template>

<style lang="scss" scoped></style>
